<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>后台管理</title>
	<style>
		body {
			background-color: #0d0d0d;
			margin: 0;
			padding: 0;
			color: #fff;
			font-family: Arial, sans-serif;
		}
		.header {
			height: 60px;
			background-color: #00ffa2;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
		}
		.header h1 {
			font-size: 24px;
			margin: 0;
			text-shadow: 1px 1px 0 #000;
		}
		.nav {
			width: 250px;
			background-color: #0f0f0f;
			height: calc(100vh - 60px);
			position: fixed;
			top: 60px;
			left: 0;
			border-right: 1px solid #ccc;
			padding: 20px;
			box-sizing: border-box;
		}
		.nav ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.nav li {
			margin: 10px 0;
		}
		.nav li a {
			text-decoration: none;
			color: #fff;
			display: block;
			padding: 5px 10px;
			border-radius: 5px;
			transition: background-color 0.2s ease-in-out;
			box-sizing: border-box;
			font-size: 18px;
			text-shadow: 1px 1px 0 #000;
		}
		.nav li a:hover {
			background-color: #00ffa2;
			color: #000;
		}
		.content {
			margin-left: 250px;
			padding: 20px;
			box-sizing: border-box;
			text-shadow: 1px 1px 0 #000;
		}
		.content h2 {
			margin-top: 0;
			font-size: 24px;
			text-shadow: 2px 2px 0 #00ffa2;
		}
		table {
			border-collapse: collapse;
			width: 100%;
			margin-top: 20px;
			box-shadow: 0 0 10px rgba(0, 255, 162, 0.8);
		}
		th, td {
			padding: 10px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}
		th {
			background-color: #0f0f0f;
			color: #fff;
			font-weight: bold;
			text-shadow: 1px 1px 0 #000;
		}
		tr:hover {
			background-color: rgba(0, 255, 162, 0.2);
		}
	</style>
</head>
<body>
	<header class="header">
		<h1>后台管理</h1>
	</header>
	<nav class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#" id="model">模型管理</a></li>
			<li><a href="#" id="data">数据管理</a></li>
			<li><a href="#">设置</a></li>
		</ul>
	</nav>
	<div class="content">
		<h2 id="tableTitle"></h2>
		<table id="table">
			<thead>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
    <script>
        var modelBtn = document.getElementById('model');
        var dataBtn = document.getElementById('data');
        var table = document.getElementById('table');
		var tableTitle = document.getElementById('tableTitle');
		

        // 点击“模型管理”按钮发送请求，获取数据渲染表格
        modelBtn.addEventListener('click', function() {
            fetch('/model')  // 替换为实际的请求地址
                .then(response => response.json())
                .then(data => {
                    if (data.code === '200') {
                        // 清空表格内容
                        table.querySelector('tbody').innerHTML = ''; 
						tableTitle.innerHTML = "模型管理" 
						var thead = table.querySelector('thead');
						thead.innerHTML = `
							<tr>
								<th>id</th>
								<th>name</th>
								<th>model</th>
								<th>package</th>
								<th>group</th>
							</tr>
						`;
                        // 循环遍历数据并添加到表格中
                        data.msg.forEach(item => {
                            var tr = document.createElement('tr');
                            tr.innerHTML = `
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.model}</td>
                                <td>${item.package}</td>
                                <td>${item.group}</td>
							`;
                            table.querySelector('tbody').appendChild(tr);
                        });
                    } else {

                    }
                })
                .catch(error => console.error(error));
        });

        // 点击“数据管理”按钮发送请求，获取数据渲染表格
        dataBtn.addEventListener('click', function() {
            fetch('/data')  // 替换为实际的请求地址
                .then(response => response.json())
                .then(data => {
                    if (data.code === '200') {
                        // 清空表格内容
                        table.querySelector('tbody').innerHTML = '';
						tableTitle.innerHTML = "数据管理" 
						var thead = table.querySelector('thead');
						thead.innerHTML = `
							<tr>
								<th>id</th>
								<th>name</th>
								<th>group</th>
							</tr>
						`;
                        // 循环遍历数据并添加到表格中
                        data.msg.forEach(item => {
                            var tr = document.createElement('tr');
                            tr.innerHTML = `
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.group}</td>
                            `;
                            table.querySelector('tbody').appendChild(tr);
                        });
                    } else {

                    }
                })
                .catch(error => console.error(error));
        });
    </script>
</body>
</html>